<template>
    <div
        class="cardDataEnquiry"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 卡资料查询 -->
        <el-card class="box-card tab-header">
            <div slot="headerss" class="clearfix">
                <span>查询服务类-卡资料查询</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>

            <!-- 搜索表单模块 -->
            <el-form
                class="searchForm"
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                label-position="right"
                size="small"
                label-width="100px"
            >
                <el-row>
                    <el-form-item label="账户类别:" class="text_fl">
                        <el-select
                            v-model="searchForm.accttype"
                            placeholder="请选择账户类别"
                            clearable
                            @change="changeCardList"
                        >
                            <el-option
                                v-for="item in AccountionTYPE_INFO"
                                :label="item.label"
                                :value="item.code"
                                :key="item.label"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="卡号:" class="text_fl">
                        <el-select
                            v-model="searchForm.cardno"
                            placeholder="请选择卡号"
                            clearable
                            @change="changeCard"
                        >
                            <el-option
                                v-for="item in cardList"
                                :label="item.CARDNBR"
                                :value="item.CARDNBR"
                                :key="item.CARDNBR"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
            </el-form>
            <card-data-enquiry-item
                :DicValue="DicValue"
                :cardData="cardData"
                :cardFlowData="cardFlowData"
                :custData="customerInfo_3002"
                :cardETCSignData="cardETCSignData"
                :tableData="tableData"
                @cardFlowPramSet="cardFlowPramSet"
            ></card-data-enquiry-item>
            <!-- 话术 -->
            <div class="hstable_wrap" v-if="speechList.length!=0">
                <el-table
                    :data="speechList"
                    border
                    stripe
                    header-row-class-name="headerRow"
                    ref="showListTable"
                    class="heard-bg business_table hstable"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                    <el-table-column label="业务话术">
                        <template slot-scope="scope">{{scope.row.content}}</template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="btnBox text_center">
                <!--
                <el-button type="primary" size="small" plain>客户资料查询</el-button>
                <el-button type="primary" size="small" plain @click="cusAddressAmend">客户地址修改</el-button>
                <el-button type="primary" size="small" @click.native="sendText">发送短信</el-button>
                -->
            </div>
        </el-card>
    </div>
</template>

<script>

// 导入默认公用模块，是否展示字段存在Defaultxxxx文件中，其他银行是否需要展示, 在自己的逻辑页面修改对应字段的boole值，只能在本银行修改
import { mapState } from 'vuex';
import CardDataEnquiryItem from './childItem/CardDataEnquiryItem.vue';
import { closePage, getDictMappingValue } from '@/utils/Common';

export default {
    name: 'CardDataEnquiry',
    data() {
        return {
            cardData: {},
            cardFlowData: {},
            cardETCSignData: {},
            tableData: [],
            DicValue: {
                cardState: '',
                comMaflag: '',
                comLmtopt: '',
                ComCCYN: '',
                ComECYN: '',
                ComISSUESTS: '',
                searchOrUpdate: '0',
                serveType: '',
            }, // 字典里的值
            pageLoading: true, // 页面loading
            searchForm: { // 搜索表单字段
                accttype: '',
                cardno: '',
            },
            cardList: [],
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
            custData: {},
            branchName: '',
        };
    },
    components: {
        CardDataEnquiryItem,
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        customerInfo_3002: state => state.common.customerInfo_3002, // 客户信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO, //账户类别列表
        cardList_3601: state => state.common.cardList_3601, //卡列表
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
    }),



    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.init();
        this.changeCardList(this.cardInfo_3004.CATEGORY + '');
        //this.QueryDactValue();
        await this.getspeechList();

    },
    methods: {
        init() {
            console.log("默认账户类别：" + this.cardInfo_3004.CATEGORY);
            console.log("默认账户：" + this.cardInfo_3004.CARDNO + ",产品：" + this.cardInfo_3004.PRODUCT);
            this.searchForm.accttype = this.cardInfo_3004.CATEGORY + '';

            this.searchForm.cardno = this.cardInfo_3004.CARDNO;

        },
        changeCardList(val) {
            console.log("当前账户类型：" + val);
            let hasDefault = false; //是否包含默认卡
            this.cardList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.cardList.push(item);
                    if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
                        hasDefault = true;
                    }
                }
            });
            console.log('是否 获取到卡号————————', this.$route.params.cardIds);
            //this.searchFormOne.CARDNO = this.$route.params.cardNo;
            if (this.$route.params.cardIds) {
                this.searchForm.cardno = this.$route.params.cardIds;
            } else {
                //包含默认卡，卡号显示默认卡，不包含，显示cardList里第一张卡号
                if (hasDefault) {
                    this.searchForm.cardno = this.cardInfo_3004.CARDNO;
                } else {
                    this.searchForm.cardno = this.cardList[0].CARDNBR;
                }
            }
            // 卡资料查询，调用3004
            this.getCardDataEnquiry();
            // 小额免密查询，调用4058
            this.cardFlowPramSet();
            // ETC查询，调用3134
            //this.cardETCSignList();
            // 附属卡查询
            this.getAttachedCardList();

        },
        //根据菜单id查询话术列表
        async getspeechList() {
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            }, (err) => {
                //this.$message.error(err);
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        changeCard(val) {
            console.log("当前卡号：" + val);

            this.searchForm.cardno = val;

            // 卡资料查询，调用3004
            this.getCardDataEnquiry();
            // 小额免密查询，调用4058
            this.cardFlowPramSet();
            // ETC查询，调用3134
            //this.cardETCSignList();
            // 附属卡查询
            this.getAttachedCardList();

        },
        // 点击客户地址修改
        // cusAddressAmend() {
        //     this.$router.push({ path: '/customerInfomationChange/addressEdit' });
        // },

        async QueryDactValue() {

            // 卡资料查询，调用3004
            //this.getCardDataEnquiry();
            // 附属卡查询
            //this.getAttachedCardList();
            //this.getasyncFun();
        },
        async getCardDataEnquiry() {
            console.log('查询3004');
            // 这里要传入银行号
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3004';
            defaultParams.body.appBody.PINFLAG = '0';
            defaultParams.body.appBody.PIN = '';
            defaultParams.body.appBody.CARDNBR = this.searchForm.cardno;
            defaultParams.body.appBody.CARDNO = this.searchForm.cardno;

            await this.$post.common.transPort(defaultParams).then(
                async (res) => {
                    const cardData = JSON.parse(res.data.jsonRes);
                    this.pageLoading = false;
                    if (res.status === 200) {
                        if (cardData.sysHead.rspCd == '000000') {
                            this.cardData = cardData.body.appBody;
                            await this.getBranchInfo(this.cardData.ABCODE);

                        } else {
                            const errorMsg = `( 错误代码：${cardData.sysHead.rspCd
                                }, 错误信息：${cardData.sysHead.rspMsg
                                } )`;
                            this.$alert(errorMsg, '提示', {
                                customClass: 'error', type: 'error',
                            });
                        }
                    }
                },
                (err) => {
                    // console.log(err);
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                },
            );
        },
        async getBranchInfo(branchId) {
            var checkParam = {
                branchCd: branchId,
                pageNum: 0,
                pageSize: 10,
            };
            await this.$post.branchInfo.pageBranchInfo(checkParam).then((res) => {
                console.log("分行查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        if (res.data.content.records.length > 0) {
                            this.branchName = res.data.content.records[0].branchName;
                        }
                        this.cardData.branchName = this.branchName;
                        console.log("this.cardData.branchName:" + this.cardData.branchName + ",this.branchName:" + this.branchName);
                    }
                }
            }, (err) => {
                //this.$message.error(err);
            });
        },
        // 查询附属卡列表
        async getAttachedCardList() {
            console.log('查询3070');
            const appBody = {
                CARDNBR: this.searchForm.cardno || '', // 卡号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3070';
            defaultParams.body.appBody = appBody;
            // 3070交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    // console.log(result,'主卡设置附属卡')
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList;
                        const newTableData = this.tableData.filter(item => item.CARDHOLDER !== 1);
                        this.tableData = newTableData;
                        // } else {
                        //     const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        //     this.$alert(errorMsg, '提示', {
                        //         customClass: 'error', type: 'error',
                        //     });
                        // }
                    }
                    // else {
                    //     this.$alert('请求失败！', '提示', {
                    //         customClass: 'error', type: 'error',
                    //     });
                    // 
                }
            });
        },
        // 查询绑定ETC列表
        // async cardETCSignList() {
        //     console.log('查询3134');
        //     const appBody = {
        //         CARDNBR: this.searchForm.cardno || '', // 卡号
        //         OPTION: '1',//操作选项，1-查询
        //         INQSEL: '1',//查询类型，1-按信用卡号，2-按ETC卡号
        //         ETCCARD: '',//ETC卡号
        //         RTNIND: '',//翻页标志
        //         RTNETCARD: ''//翻页ETC卡号
        //     };
        //     const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
        //     defaultParams.body.appHead.tranCode = '3134';
        //     defaultParams.body.appBody = appBody;
        //     // 3070交易
        //     this.$post.common.transPort(defaultParams).then((res) => {
        //         if (res.status === 200) {
        //             const result = JSON.parse(res.data.jsonRes);

        //             if (result.sysHead.rspCd === '000000') {
        //                 this.cardETCSignData = result.body.appBody;
        //             } else {
        //                 this.cardETCSignData = { COUNT: '0' };
        //             }
        //         } else {
        //             this.cardETCSignData = { COUNT: '0' };
        //         }
        //     });
        // },

        async cardFlowPramSet(val) {
            console.log('查询4058');
            if (val == '1') {
                // 开通
                this.searchOrUpdate = '1';
                this.serveType = '46';
            } else if (val == '2') {
                // 关闭
                this.searchOrUpdate = '1';
                this.serveType = '44';
            } else {
                // 查询
                this.searchOrUpdate = '0';
                this.serveType = '';
            }

            const appBody = {
                CARDNO: this.searchForm.cardno || '', // 卡号
                PINFLAG: this.pinFlag, // 是否检查密码标志
                OPTION: this.searchOrUpdate, // 修改选项   0为查询  1为修改
                SERTYPE: this.serveType, // 服务类型  查询时无作用
            };

            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4058';
            defaultParams.body.appBody = appBody;

            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.cardFlowData = result.body.appBody;
                        if (appBody.OPTION === '1') {
                            this.$alert('修改成功!', '提示', {
                                customClass: 'success', type: 'success',
                            });
                            this.cardFlowPramSet();
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },


        // 点击关闭 处理事件
        handleClose() {
            closePage(this.$route, this, 1);
        },
        // 发送短信
        sendText() {
            this.$router.push({
                path: '/index/dynamicMessage',
            });
        },
    },
};
</script>

<style lang='scss' >
.cardDataEnquiry {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 13px;
        }
        .el-card__header {
            padding: 8px !important;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .box-group .content p {
        color: #4e4d4d;
        font-size: 14px;
        text-align: left;
        line-height: 36px;
        span {
            color: #000;
            text-align: right;
            display: inline-block;
            min-width: 120px;
            width: 36%;
            margin-right: 4px;
        }
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
